<template>
	<view class="classify">
		<my-search :show="false"></my-search>
		<view class="k_box">
			<view style="position: relative;">
				<scroll-view :scroll-with-animation="true" class='keyword_box' :scroll-x="true" show-scrollbar="false"
					:scroll-left="scrollLeft">

					<view :class="['keyword',index+1==firstCate.length?'mr':'']" @click="changeFirst(index)"
						v-for="(item,index) in firstCate" :key="index">
						<view :class="['img_box',kind==index?'img_check':'']">
							<image :class="['key_img']" :src="item.image"></image>
						</view>

						<view>
							<text :class="[kind==index?'name_check':'']">{{item.name}}</text>
						</view>

					</view>


				</scroll-view>
				<view class="zk_box" @click="show=true">
					<view>展</view>
					<view>开</view>
					<image style="width: 30rpx;" src="@/static/img/zk.png" mode="widthFix"></image>
				</view>
			</view>

		</view>
		<view style="height: 99px;"></view>

		<view class="classify_good">
			<view class="right_area " style="position: fixed;z-index:99;">
				<u-tabs :list="secondCateThree" :current="activeTabThree" @change="changeSecondThree"
					v-if="secondCateThree.length!=1" :show-bar="false"></u-tabs>
			</view>
			<view style="height: 80rpx;" v-if="secondCateThree.length!=1"></view>
		</view>

		<v-tabs-column activeColor='#f44b44' :tabs="secondCate" v-model="activeTab" field="name" @change="changeSecond"
			position="left">
			<view v-if="bitmap" class="all-good" style="width: 550rpx;">
				<my-profile v-for="(item,index) in list" :key="index" :wares="item" class="single_good"></my-profile>
			</view>
			<view v-else class="bitmap" style="width: 550rpx;">
				<view style="height:150rpx;"></view>
				<image :src="none" mode="widthFix"></image>
				<view class="center gray_font">暂时没有商品，请耐心等候</view>
			</view>
		</v-tabs-column>

		<u-popup v-model="show" mode="top" border-radius="14">
			<view class="top_box">
				<view :class="['keywords']" @click="changeFirst(index)" v-for="(item,index) in firstCate" :key="index">
					<view :class="['img_box',kind==index?'img_check':'']">
						<image :class="['key_img']" :src="item.image"></image>
					</view>
					<view>
						<text :class="[kind==index?'name_check':'']">{{item.name}}</text>
					</view>
				</view>
				<view class="up_box" @click="show=false">
					<view style="margin-right: 10rpx;">点击收起</view>
					<u-icon name="arrow-up"></u-icon>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	const app = getApp().globalData;
	const {
		imgRemote
	} = app;
	import ctabs from '@/components/san-tabs/san-tabs.vue'
	import tabs2 from '../../components/v-tabs-column/v-tabs-column.vue';

	export default {
		components: {
			tabs2,
			ctabs
		},
		data() {
			return {
				list2: [{
					name: '待收货'
				}, {
					name: '待付款'
				}, {
					name: '待评价',
					count: 5
				}],
				current: 0,
				kind: 0,
				cateId: '',
				page: 1,
				firstCate: [],
				secondCate: [],
				secondCateThree: [],
				moreSecond: true,
				bitmap: true,
				activeTab: 0,
				activeTabThree: 0,
				list: [],
				cartware: [],
				index: '',
				itemWidth: 0,
				totalWidth: 0,
				scrollLeft: 0,
				show: false,
				none: ''
			};
		},
		methods: {
			//查找索引
			findIndex(obj, dest) {
				for (let i in obj) {
					if (obj[i].id == dest) {
						return i
					}
				}
			},
			//一级分类
			goodCate() {
				let {
					classId
				} = getApp().globalData;
				this.$get(this.$api.goodCate, {}, (res) => {
					let {
						data
					} = res;

					if (data.code == 1) {
						//返回索引
						let newData = data.data;
						let arr = [
							/* {
														name: '全部',
														id: ''
													} */
						]

						arr.push(...data.data);
						this.firstCate = data.data;
						let index = this.findIndex(this.firstCate, classId);
						this.kind = index ? index : 0;
						this.cateId = classId ? classId : this.firstCate[0].id;
						this.getWidth();
						this.goodSecondCate();
						this.getGoods();
					}
				})
			},
			//二级分类
			goodSecondCate() {
				this.activeTab = 0;
				this.$get(this.$api.goodChild_cate, {
					cate_id: this.cateId
				}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						let arr = [{
							name: '全部',
							id: this.cateId
						}]
						arr.push(...data.data);
						this.secondCate = arr;
						
						if(arr.length>0){
							this.goodSecondCateThree(arr[0].id);
						}
					}
				})
			},
			goodSecondCateThree(cateId) {
				this.activeTabThree = 0;
				this.$get(this.$api.goodChild_cate, {
					cate_id: cateId
				}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						let arr = [{
							name: '全部',
							id: this.cateId
						}]
						arr.push(...data.data);
						this.secondCateThree = arr;
					}
				})
			},
			getGoods() {
				let params = {
					cate_id: this.cateId,
					page: this.page
				}

				this.$get(this.$api.goodCateGood, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.list = data.data;
						if (this.page == 1) {
							this.bitmap = data.data.length ? true : false;
						}
					}

				}, true)
			},
			//分类商品
			getGood() {
				let params = {
					cate_id: this.cateId,
					page: this.page
				}

				this.$get(this.$api.goodCateGood, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.list = this.list.concat(data.data);
						if (this.page == 1) {
							this.bitmap = data.data.length ? true : false;
						}
					}

				}, true)
			},

			// 切换一级分类
			changeFirst(index) {
				this.page = 1;
				this.list = [];
				this.activeTab = 0;
				this.secondCate = [];
				this.cateId = this.firstCate[index].id;
				this.kind = index;
				this.moreSecond = true;
				this.scrollLeft = this.itemWidth * (index) - 20;
				console.log(this.scrollLeft);
				this.goodSecondCate();
				this.getGood();
			},
			// 切换二级分类
			changeSecond(index) {
				this.page = 1;
				this.list = [];
				this.activeTab = index;
				this.cateId = this.secondCate[index].id;
				this.getGood();
				this.goodSecondCateThree(this.cateId);
			},
			changeSecondThree(index) {
                this.page = 1;
                this.list = [];
                this.activeTabThree = index;
                this.cateId = this.secondCateThree[index].id;
                this.getGood();
			},
			getWidth() {
				this.$nextTick(() => {
					let dom = uni.createSelectorQuery().select(".keyword");
					dom.boundingClientRect((data) => {
						let num = this.firstCate.length;
						this.itemWidth = data.width + 8;
						this.totalWidth = num * this.itemWidth;
					}).exec();
				});
			}
		},
		onShow() {
			if (getApp().globalData.classId) {
				this.page = 1;
				this.list = [];
				this.firstCate = [];
				this.goodCate();
			}
		},
		onLoad() {
			this.none = this.$imgUrl + 'assets/img/no_content.png';
			this.goodCate();
		},
		onHide() {
			getApp().globalData.isReload = false;
			getApp().globalData.classId = "";
		},
		onReachBottom() {
			this.page++;
			this.getGood();
		}
	};
</script>

<style scoped lang="scss">
	::v-deep .active:before {

		background: #f44b44 !important;

	}
	
	

	.k_box {
		position: fixed;
		left: 0;
		top: 90rpx;
		width: 100%;
		z-index: 100;
		background-color: white;
		font-size: 26rpx;
		border-bottom: 4rpx solid #F1F1F1;
	}

	.keyword_box {
		box-sizing: border-box;
		padding: 0rpx 0rpx 0 0rpx;
		width: 100%;
		white-space: nowrap;

	}

	.key_img {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}

	.keyword {
		width: 160rpx;
		display: inline-block;
		//margin: 0 20rpx 0 0;
		text-align: center;
		height: 100%;
		box-sizing: border-box;
		padding: 10rpx 0 35rpx 0;
	}

	.keywords {
		width: 20%;
		display: inline-block;
		//margin: 0 20rpx 0 0;
		text-align: center;
		height: 100%;
		box-sizing: border-box;
		padding: 10rpx 0 35rpx 0;
	}

	.key_check {
		background-color: #EEFEF7;
		color: #13AE7E;
	}

	.img_box {
		border: 4rpx solid transparent;
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.img_check {
		border: 4rpx solid #f44b44;
	}

	.name_check {
		background-color: #f44b44;
		color: white;
		box-sizing: border-box;
		padding: 5rpx 15rpx;
		border-radius: 25rpx;
		font-size: 26rpx;
	}

	page {
		background: white;
	}

	.classify {
		height: 100vh;
		background: white;
	}

	.classify .second_name {

		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.classify .first_name {
		position: fixed;
		z-index: 5;
		/* padding-right: 20rpx; */
		width: 73.5%;
		background: white;

		.second-cate {
			margin-right: 40rpx;
			display: flex;

			flex: 1;
			align-items: center;
		}
	}

	.classify .left_area {
		width: 24.5%;
		position: fixed;
		overflow-x: scroll;
		background: #eee;
		height: 100vh;
	}

	.classify .left_area::-webkit-scrollbar {
		display: none;
	}

	.classify .right_area {
		width: 72%;
		margin-left: 26.8%;

		.second-mask {
			position: fixed;
			width: 73.5%;
			right: 0;
			background: rgba(0, 0, 0, 0.4);
			height: 100vh;
			z-index: 999;
		}
	}

	.classify>.classify_good {
		display: flex;
		/* padding-right: 20rpx; */
	}


	.classify .is_active {
		background: white;
		font-weight: bold;
		color: #1677fe;
	}

	.classify .is_active .left_border {
		background: #1677fe;
		width: 8rpx;
		height: 100rpx;
		position: absolute;
		left: 0;
		border-radius: 2rpx;
	}

	.mp_tab_width {
		width: 96%;
		height: 50rpx;
		padding-bottom: 6rpx;
	}


	/* #ifdef MP-WEIXIN   */
	.classify .right_area .single_good .my_profile {
		border-bottom: 1px solid #eaeaea;
	}

	.classify .right_area .single_good {
		border-bottom: 1px solid #eaeaea;
		/* padding-right: 20rpx; */
	}

	/* #endif */
	.classify .bitmap {
		text-align: center;
		height: calc(100vh - 204rpx - 50px);
		background: white;

	}

	.classify .bitmap image {
		width: 69%;
	}

	.classify .option {
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
		display: flex;
	}

	.classify .option>view {
		color: white;
		line-height: 60rpx;
		width: 120rpx;
		height: 60rpx;
		text-align: center;
	}

	.classify .cancel {

		background: #addb8c;
		border-radius: 10rpx 0 0 10rpx;
	}

	.classify .determine {

		background: #009A44;
		border-radius: 0 10rpx 10rpx 0;
	}

	.classify .all_title {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.classify .show_all_sort {
		display: flex;
		flex-wrap: wrap;
		margin-left: 10rpx;
	}



	.classify .all-second {
		padding-bottom: 20rpx;
		background: white;



		text {
			background: #eee;
			border-radius: 10rpx;
			color: #999;
			margin-left: 10rpx;
			padding: 8rpx 23rpx;
			font-size: 22rpx;
			margin-top: 10rpx;
			display: inline-block;

		}

		.second_active {
			background: #E9FFDD;
			color: #57B127;
		}
	}

	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loading .load_img {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx;
	}


	.classify .my_loading {
		color: #808080;
		font-size: 24rpx !important;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background: white;
	}

	/deep/ .s-tab-nav {
		background: #eee;
		border-radius: 10rpx;
		color: #999;
		margin-left: 10rpx;
		padding: 2rpx 23rpx;
		font-size: 22rpx;
	}

	/deep/ .is-active {
		background: #FFF2EE;
		// border: 1px solid #57B127;
	}

	/deep/ .s-tabs-nav-wrap .s-tab-nav-view {
		height: 40rpx;
	}

	.classify /deep/ .u-tab-item {
		margin-top:28rpx;
		background: #eee;
		font-size: 22rpx !important;
		margin-right: 10rpx;
		margin-left: 10rpx;
		border-radius: 10rpx;
		// color:#999!important;
		height: 50rpx !important;
		line-height: 32rpx !important;
		padding: 10rpx 20rpx !important;
	}

	.zk_box {
		text-align: center;
		position: absolute;
		right: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: white;
		height: 100%;
		font-weight: bold;
		width: 60rpx;
	}

	.top_box {
		background-color: white;
	}

	.up_box {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 20rpx 0;
		border-top: 1rpx solid #F2F2F2;
		color: #888888;
		font-size: 26rpx;
	}

	.mr {
		margin-right: 60rpx;
	}

	scroll-view ::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	::-webkit-scrollbar {
		display: none;
	}
</style>